<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>审批中心</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro/easyui.css">

</head>
<body>
<style type="text/css">
.body{
	background:#F3F3F3;
	height:100%;
}
ul{
	list-style:none;
}
.nav-tabs{
	height: 26px;
    border-bottom: 1px solid #19AA8D;
}
.nav-left{
	float: left;
    margin-bottom: -1px;
   
}
.nav-left>a{
	background: #19AA8D!important;
    color: white;
    display:block;
    width: 130px;
    height: 26px;
    text-align: center;
    font-size: 13px;
    line-height: 26px;
    margin-right:2px;
    border-radius: 4px 4px 0 0;
}
.nav-right{
	float:right;
	margin-bottom: -1px;
}
.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
}
.application{
	width:1080px;
	height:160px;
	background:white;
	margin:10px auto;
}
.application-left{
	height: 100%;
    width: 12%;
    float: left;
    
}
.application-right{
	width: 86%;
	height:100%;
    float: left;
    padding-right:20px;
}
.application-icon{
	width:60px;
	height:60px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid #e4e4e4;
}
.application-right-top{
	height:30%;
	border-bottom: 1px solid #E6E6FA;
	padding-top:20px;
}
.application-right-bottom{
	height:56%
}
.pull-left{
	float:left;
}
.pull-right{
	float:right;
}
.application-right-bottom-left{
	float:left;
	width:30%;
	height:100%;
}
.application-right-bottom-right{
	float:right;
	width:70%;
	height:100%;
}
.info-item{
	height: 25px;
    line-height: 25px;
    font-weight: 400;
    font-size: 12px;
    color: #666;
    text-align: left;
}
</style>
<div class="body">
	<ul class="nav-tabs">
		<li class="nav-left">
			<a>xxxxx</a>
		</li>
		<li class="nav-left">
			<a style="background:white;">yyyyy</a>
		</li>
		<div class="nav-right">
			<div class="date-search">
				<ul class="top-se">
					<li>申请日期</li>
					<li><input id="dd-start" type="text" class="easyui-datebox" required="required" style="width:150px"></li>
					<li>至</li>
					<li><input id="dd-end" type="text" class="easyui-datebox" required="required" style="width:150px"></li>
				</ul>
			</div>
			<div class="date-search">
				<input id="ss" class="easyui-searchbox" style="width:180px"data-options="prompt:'Please Input Value'">
			</div>
		</div>
	</ul>
	
	<div class="application">
		<div class="application-left">
		<img class="application-icon">
		</div>
		<div class="application-right">
			<div class="application-right-top">
				<div class="pull-left">
					<span style="font-weight: 400;font-size: 16px;color: #666;">申请类型</span>
					<span style="font-weight: 400;font-size: 12px;color: #999;margin-left: 5px;">xxxx年x月x日      xx时xx分xx秒</span>
				</div>
				<div class="pull-right">
					<button style="width: 77px; height: 22px;border-radius: 2px; font-weight: 400;font-size: 12px;color: #fff;padding-top: 3px;line-height:2px;">审批</button>
				</div>
			</div>
			<div class="application-right-bottom">
				<div class="application-right-bottom-left">
					<div class="info-item">姓名：xxx</div>
					<div class="info-item">职位：yyy</div>
					<div class="info-item">理由：zzz</div>
				</div>
				<div class="application-right-bottom-right">
					<div class="info-item">类型：aaa</div>
					<div class="info-item">时间：xxxx年x月xx日xx时xx分xx秒至xxxx年x月xx日xx时xx分xx秒    共xx天xx小时</div>
				</div>
			</div>
		</div>
	</div>
	
	</div>
</body>
</html>